<template>
  <div>
    <!-- 查询条件 -->
    <div style="padding: 5px; text-align: left">
      <el-form :inline="true" :model="stockSelect" class="demo-form-inline">
        <el-form-item label="入库单号：">
          <el-input style="width: 100px" v-model="stockSelect.warehousingCode" placeholder="入库单号"></el-input>
        </el-form-item>
        <el-form-item label="单据类型：">
          <el-select style="width: 100px" v-model="stockSelect.warehousingType" placeholder="请选择单据类型" clearable>
            <el-option label="全部" :value="0"> </el-option>
            <el-option label="采购收货入库" :value="1"> </el-option>
            <el-option label="销售退货入库" :value="2"> </el-option>
            <el-option label="生产产品入库" :value="3"> </el-option>
            <el-option label="领用退还入库" :value="4"> </el-option>
            <el-option label="借货入库" :value="5"> </el-option>
            <el-option label="借出入库" :value="6"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库状态：">
          <el-select style="width: 100px" v-model="stockSelect.state" placeholder="入库状态" clearable>
            <el-option label="全部" :value="0"> </el-option>
            <el-option label="待审核" :value="1"> </el-option>
            <el-option label="审核成功" :value="2"> </el-option>
            <el-option label="审核失败" :value="3"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getStoreList()" icon="el-icon-search">查询</el-button>
          <el-button plain @click="empty()" icon="el-icon-refresh-left">重置</el-button>
          <el-button class="btn" type="success" icon="el-icon-circle-plus-outline" @click="addSrote()">新增</el-button>
          <el-button class="btn" icon="el-icon-delete" @click="DeleteList()" type="danger">删除</el-button>
          <el-button class="btn" type="warn" icon="el-icon-upload2" @click="exportExcel(StoreList)">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div style="padding: 5px; text-align: left">
      <el-table :data="StoreList" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="warehousingCode" label="入库单号">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称"> </el-table-column>
        <el-table-column prop="productCode" label="产品编号"> </el-table-column>
        <el-table-column prop="batch" label="批次"> </el-table-column>
        <el-table-column prop="unitName" label="单位"> </el-table-column>
        <el-table-column prop="inWarehouseNumber" label="数量">
        </el-table-column>
        <el-table-column prop="name" label="仓库"> </el-table-column>
        <el-table-column prop="locationName" label="库位"> </el-table-column>
        <el-table-column prop="warehousingType" label="入库类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.warehousingType == 1">采购收货入库</el-tag>
            <el-tag v-if="scope.row.warehousingType == 2">销售退货入库</el-tag>
            <el-tag v-if="scope.row.warehousingType == 3">生产产品入库</el-tag>
            <el-tag v-if="scope.row.warehousingType == 4">领用退还入库</el-tag>
            <el-tag v-if="scope.row.warehousingType == 5">借货入库</el-tag>
            <el-tag v-if="scope.row.warehousingType == 6">借出入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商"> </el-table-column>
        <el-table-column prop="creator" label="制单人"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.state == 0">待审核</el-tag>
            <el-tag v-if="scope.row.state == 1">审核成功</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 2">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reviewer" label="审核人"> </el-table-column>
        <el-table-column prop="audittime" label="审核时间">
          <template slot-scope="scope">
            {{ scope.row.audittime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="InfoShow(scope.row.id)" icon="el-icon-zoom-in">查看</el-button>
            <el-button type="text" size="small" @click="Update(scope.row.id)" icon="el-icon-edit">编辑</el-button>
            <el-button type="text" size="small" @click="Delete(scope.row.id)" icon="el-icon-delete">删除</el-button>
            <el-button type="text" size="small" @click="check(scope.row.id)" icon="el-icon-circle-plus"
              v-if="scope.row.state == 0">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="stockSelect.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="stockSelect.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount" prev-text="上一页" next-text="下一页" align="left">
    </el-pagination>

    <!-- 弹框列表 -->
    <el-dialog title="入库单详情" :visible.sync="dialogFormVisible">
      <el-descriptions>
        <el-descriptions-item label="入库单号：">{{
        InWarehousList.warehousingCode
      }}</el-descriptions-item>
        <el-descriptions-item label="入库单类型：">{{
          InWarehousList.warehousingTypeName
        }}</el-descriptions-item>
        <el-descriptions-item label="入库状态：">{{
          InWarehousList.stateName
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商编号：">{{
          InWarehousList.supplierCode
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称：">{{
          InWarehousList.supplierName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人：">{{
          InWarehousList.contract
        }}</el-descriptions-item>
        <el-descriptions-item label="电话：">{{
          InWarehousList.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="制单人：">{{
          InWarehousList.creator
        }}</el-descriptions-item>
        <el-descriptions-item label="制单日期：">{{
          InWarehousList.audittime
        }}</el-descriptions-item>
        <el-descriptions-item label="备注：">{{
          InWarehousList.remarks
        }}</el-descriptions-item>
        <el-descriptions-item label="审核原因：">{{
          InWarehousList.opinion
        }}</el-descriptions-item>
      </el-descriptions>
      <!-- 弹框表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="productCode" label="产品编码"> </el-table-column>
        <el-table-column prop="productName" label="产品名称"> </el-table-column>
        <el-table-column prop="specs" label="规格"> </el-table-column>
        <el-table-column prop="batch" label="批次"> </el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="inWarehouseNumber" label="入库数">
        </el-table-column>
        <el-table-column prop="sumPrice" label="总价"></el-table-column>
        <el-table-column prop="locationName" label="库位"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹框列表 -->
    <el-dialog title="入库单详情" :visible.sync="dialogFormVisible2">
      <el-descriptions>
        <el-descriptions-item label="入库单号：">{{
        InWarehousList.warehousingCode
      }}</el-descriptions-item>
        <el-descriptions-item label="入库单类型：">{{
          InWarehousList.warehousingTypeName
        }}</el-descriptions-item>
        <el-descriptions-item label="入库状态：">{{
          InWarehousList.stateName
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商编号：">{{
          InWarehousList.supplierCode
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称：">{{
          InWarehousList.supplierName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人：">{{
          InWarehousList.contract
        }}</el-descriptions-item>
        <el-descriptions-item label="电话：">{{
          InWarehousList.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="制单人：">{{
          InWarehousList.creator
        }}</el-descriptions-item>
        <el-descriptions-item label="制单日期：">{{
          InWarehousList.audittime
        }}</el-descriptions-item>
        <el-descriptions-item label="备注：">{{
          InWarehousList.remarks
        }}</el-descriptions-item>
        <el-descriptions-item label="审核原因："><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
          </el-input></el-descriptions-item>
      </el-descriptions>
      <!-- 弹框表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="productCode" label="产品编码"> </el-table-column>
        <el-table-column prop="productName" label="产品名称"> </el-table-column>
        <el-table-column prop="specs" label="规格"> </el-table-column>
        <el-table-column prop="batch" label="批次"> </el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="inWarehouseNumber" label="入库数">
        </el-table-column>
        <el-table-column prop="sumPrice" label="总价"></el-table-column>
        <el-table-column prop="locationName" label="库位"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="passCheck(1)">审核通过</el-button>
        <el-button type="primary" @click="passCheck(2)">审核不通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  StoreList,
  ShowInWord,
  ProductListShow,
  InWareDelete,
  InWareDeleteList,
  InWareUpdateCheck,
} from "@/api/WarehouseServer/Store";
import XLSX from "xlsx";
export default {
  data() {
    return {
      textarea: "",
      dialogFormVisible2: false,
      List: [],
      tableData: [],
      InWarehousList: {},
      dialogFormVisible: false,
      totalCount: 0,
      stockSelect: {
        warehousingCode: "",
        warehousingType: 0,
        state: 0,
        pageIndex: 1,
        pageSize: 5,
      },
      StoreList: [],
      StoreSelect: {
        storeName: "",
        pageIndex: 1,
        pageSize: 2,
      },
      Id: 0,
    };
  },
  methods: {
    //导出
    exportExcel(form) {
      //excel数据导出
      // 过滤需要导出的字段
      const filteredData = form.map((item) => {
        return {
          入库单号: item.warehousingCode,
          产品名称: item.productName,
          产品编号: item.productCode,
          批次: item.batch,
          单位: item.unitName,
          数量: item.inWarehouseNumber,
          仓库: item.name,
          库位: item.locationName,
          入库类型: item.warehousingType,
          供应商: item.supplierName,
          制单人: item.creator,
          状态: item.state,
          审核人: item.reviewer,
          审核时间: item.audittime,
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 导出Excel文件
      XLSX.writeFile(workbook, "入库信息列表.xlsx");
    },

    //审核通过
    passCheck(val) {
      var data = {
        id: this.Id,
        state: val,
        opinion: this.textarea,
      };
      InWareUpdateCheck(data).then((res) => {
        if (res.data.data) {
          this.$message({
            message: "审核成功",
            type: "success",
          });
          this.dialogFormVisible2 = false;
          this.getStoreList();
        } else {
          this.$message({
            message: "审核失败",
            type: "error",
          });
        }
      });
    },
    //审核
    check(Id) {
      this.Id = Id;
      this.dialogFormVisible2 = true;
      this.GetBackFillInWard();
      this.GetBeginningServeList();
    },
    DeleteList() {
      if (this.List.length == 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          InWareDeleteList(this.List).then((res) => {
            if (res.data.data) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getStoreList();
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.List = val;
    },
    Delete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var data = {
            id: id,
          };
          InWareDelete(data).then((res) => {
            if (res.data.data) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getStoreList();
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Update(Id) {
      //跳转到修改页面
      this.$router.push({ path: "/WarehouseManage/StoreManagement/StoreUpdate?id=" + Id });
    },
    //弹框详细表
    InfoShow(Id) {
      this.Id = Id;
      this.dialogFormVisible = true;
      this.GetBackFillInWard();
      this.GetBeginningServeList();
    },
    //产品信息列表
    GetBeginningServeList() {
      var data = {
        id: this.Id,
      };
      ProductListShow(data).then((res) => {
        this.tableData = res.data;
      });
    },
    //入库单详情
    GetBackFillInWard() {
      var data = {
        id: this.Id,
      };
      ShowInWord(data).then((res) => {
        this.InWarehousList = res.data;
      });
    },
    //分页
    handleSizeChange(val) {
      this.stockSelect.pageSize = val;
      this.getStoreList();
    },
    handleCurrentChange(val) {
      this.stockSelect.pageIndex = val;
      this.getStoreList();
    },
    //查询
    getStoreList() {
      StoreList(this.stockSelect).then((res) => {
        this.StoreList = res.data.data;
        this.totalCount = res.data.totalCount;
      });
    },
    addSrote() {
      //跳转到添加页面
      this.$router.push({ path: "StoreAdd" });
    },
  },
  created() {
    this.getStoreList();
  },
};
</script>

<style>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* 设置高度为 100%，以便填充整个页面 */
}
</style>